<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login" class="form-class">
      <input type="text" v-model="username" placeholder="Username" required class="form-input">
      <input type="password" v-model="password" placeholder="Password" required class="form-input">
      <button type="submit" :on-click="login">Login</button>
    </form>
  </div>
</template>
 
<script>
import { mapMutations } from 'vuex'
 
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    ...mapMutations(['login']),
    login() {
      // 实际的登录逻辑，例如，发送登录请求到服务器
      this.$router.push('/index') // 登录成功后跳转到主页
    },
  },
}
</script>

<style>
.form-class {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-input {
  margin-bottom: 15px;
}
</style>